<template>
  <div style="background-color: #000" >
    <el-menu
      :default-active="activeIndex"
      class="indexNavMenu"
      router
      mode="horizontal"
      @select="navMenuSelect"
      background-color="#000"
      text-color="#fff"
      active-text-color="#ffd04b"
    style="width:1200px;margin:0px auto;">
      <el-menu-item v-for="item in menuList" :key="item.menu_id" :index="item.url" style="height: 100%;line-height: 50px">
        {{item.name}}
      </el-menu-item>
      <UserMenu :isLogin="isLogin" style="float: right;height: 100%"></UserMenu>
    </el-menu>
  </div>
</template>

<script>
import UserMenu from './UserMenu'

export default {
  name: 'IndexNavMenu',
  data () {
    return {
      activeIndex: '',
      menuList: [
        {
          menu_id: 1,
          name: '首页',
          url: '/index'
        },
        {
          menu_id: 2,
          name: '课程',
          url: '/class'
        }
      ]
    }
  },
  props: {
    isLogin: false
  },
  components: {
    UserMenu
  },
  methods: {
    navMenuSelect (key, keyPath) {
    }
  },
  mounted () {
    // 获取地址栏中的路由，设置elementui中的导航栏选中状态
    this.activeIndex = window.location.pathname
  }
}
</script>

<style>
  .indexNavMenu {
    height: 50px;
    line-height: 50px;
    border-bottom: 0px;
  }
  .el-menu.el-menu--horizontal{
    border-bottom: 0px;
  }
</style>
